<template>
	<div class='list'>
		<div class='list-main'>
			<div class="list-l" ref='left'>
				<ul class='l-item'><!--1级-->
					<li 
						v-for='(item,index) in leftData'
						:key='index'
						@click='goScroll(index)'
						:class='{active:index==currentIndex}'
					>{{item.name}}</li>
				</ul>
			</div>
			<div class="list-r" ref='right'>
				<div ref='rightShopList'>
					<ul
						v-for="(item,index) in rightData"
						:key='index'
						class='r-ul'
					><!--2级-->
						<li 
							class='shop-list'
							v-for="(k,i) in item"
							:key='i'
						>
							<h2>{{k.name}}</h2>
							<ul class='r-content'><!--3级-->
								<li
									v-for='(j,idx) in k.list'
									:key='idx'
								>
									<img :src="j.imgUrl" alt="">
									<span>{{j.name}}</span>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import http from '@/common/api/request.js'
import BScroll from 'better-scroll'
export default{
	name : 'List',
	data () {
		return {
			leftData:[],//左侧一级数据
			rightData:[],//右侧二、三级数据
			rightBScroll:'',
			allHeight:[],//右侧高滚动的数组
			scrollY:0//右侧滚动的值
		}
	},
	computed:{
		currentIndex(){
			
			return this.allHeight.findIndex((item,index)=>{
				
				return this.scrollY >= item && this.scrollY < this.allHeight[index+1];
			
			})
			
		}
	},
	components:{
		Tabbar
	},
	created(){
		http.$axios({
			url:'/api/goods/list',
		}).then(res=>{
			
			let leftArr = [];
			let rightArr = [];
			
			res.forEach(v=>{
				leftArr.push({
					id:v.id,
					name:v.name
				})
				rightArr.push( v.data );
			})
			
			this.leftData = leftArr;
			this.rightData = rightArr;
			
			//等待DOM都加载完执行的代码
			this.$nextTick(()=>{
				//左侧滑动
				new BScroll(this.$refs.left,{
					click:true
				});
				
				//右侧滑动
				this.rightBScroll = new BScroll(this.$refs.right,{
					click:true,
					probeType:3
				});
				
				let height = 0;
				this.allHeight.push( height );
				
				//获取到右侧每一个二级的所有高度
				let uls = this.$refs.rightShopList.getElementsByClassName('r-ul');
				Array.from( uls ).forEach(v=>{
					height += v.clientHeight;
					this.allHeight.push( height );
				})
				
				//右侧滑动==》左侧对应显示
				this.rightBScroll.on('scroll',(pos)=>{
					this.scrollY = Math.abs( pos.y );
				})
				
				
				
			})
			
		})
	},
	methods:{
		//点击左侧（一级导航）
		goScroll( index ){
			
			this.currentIndex = index;
			
			this.rightBScroll.scrollTo(0,-this.allHeight[index],300)
		}
	}
	
}
</script>

<style scoped lang="scss">
.active{
	color:red;
	font-size:22px;
}
.list-main{
	display: flex;
	position: absolute;
	top:0;
	bottom: 61.88px;
	overflow: hidden;
}
.list-l{
	width: 130px;
	background-color: #ccc;
	overflow: hidden;
	.l-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		li{
			width: 100%;
			line-height: 60px;
			text-align: center;
			font-size:18px;
		}
	}
}
.list-r{
	width: 100%;
	height: 100%;
	overflow: hidden;
	.shop-list{
		text-align: center;
		h2{
			font-size:22px;
		}
		.r-content{
			display: flex;
			flex-wrap: wrap;
			li{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 80px;
				height: 80px;
				font-size:12px;
				img{
					width: 50px;
					height: 50px;
				}
			}
		}
	}
}
</style>
